<template>
	<div>
		<div class="abost">
			<div class="searche">
				<input type="text" placeholder="请输入内容" v-model="value">
				<button type="button" @click="sea">搜索</button>
				<p>为您搜索到以下关键字品牌</p>
			</div>
			<div class="brande">
				<p>相关品牌列表</p>
			</div>
			<div class="brande_a">
				<p>品牌信息</p>
				<p>操作</p>
			</div>
			<div class="brande_b" v-for="(item,index) in search.ItemList" :key="index">
				<img :src="item.Logo">
				<p>{{item.Name}}</p>
				<p>查看详情</p>
			</div>
		</div>
	</div>
</template>

<script>
	import {GetSearch} from '@/api/Searchel.js'
	export default {
		data(){
			return{
				search:[],
				value:this.$route.params.id,
			}
		},
		created() {
			this.sea()
		},
		methods:{
			sea(){
				GetSearch( this.value)
				.then(res=>{
					this.search = res.data.Data;
					console.log(this.search)
				})
			}
		}
	}
</script>

<style>
	.abost{
		background-color: #FFFFFF;
	}
	.searche{
		padding-top: 20px;
		margin-left: 20px;
	}
	.searche input{
		width: 360px;
		height: 36px;
		border: 1px solid #b9c3d2;
		text-indent: 10px;
		outline: none;
	}
	.searche input::placeholder{
		color: #606266;
	}
	.searche input:focus{
		border: 1px solid #5830a0;
	}
	.searche button{
		width: 80px;
		height: 37px;
		color: #FFFFFF;
		background-color: #5830a0;
		border: none;
		font-size: 12px;
		cursor: pointer;
	}
	.searche p{
		color: #a8acb0;
		margin-top: 5px;
		font-size: 15px;
	}
	.brande{
		border-left: 4px solid #5830a0;
		margin-left: 20px;
		margin-top: 25px;
	}
	.brande p{
		margin-left: 10px;
	}
	.brande_a{
		height: 40px;
		background-color: #f7f8fa;
		margin-left: 20px;
		margin-top: 15px;
		line-height: 40px;
		display: flex;
	}
	.brande_a p{
		margin-left: 10px;
		color: #2e384d;
	}
	.brande_a p:nth-of-type(1){
		width: 1200px;
	}
	.brande_a p:nth-of-type(2){
		width: 100px;
	}
	.brande_b{
		height: 80px;
		border-top: 1px solid #ebeef5;
		display: flex;
	}
	.brande_b img{
		width: 60px;
		height: 60px;
		margin-left: 20px;
		margin-top: 10px;
	}
	.brande_b p:nth-of-type(1){
		color: #454555;
		font-weight: 800;
		margin-left: 10px;
		margin-top: 10px;
		width: 1130px;
	}
	.brande_b p:nth-of-type(2){
		width: 100px;
		color: #266eff;
		line-height: 80px;
		font-size: 14px;
	}
</style>
